<template>
  <div id="div-1" class="py-1 bg-gray-100">
    <div class="mx-[10%] " id="content">
      <a-flex class="gap-1" id="sub1-content">
        <a-flex class="bg-white p-4 w-2/5" :vertical="true" id="sub1-left">
          <a-typography-title id="sub1-left-title" :level="5">地方指标数据对比查询选地域属性</a-typography-title>
          <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" id="sub1-form">
            <a-form-item label="选地域属性" class="!mb-2" id="sub1-form-item1">
              <a-radio-group id="sub1-form-radio-group">
                <a-radio value="1" id="sub1-form-radio1">国家</a-radio>
                <a-radio value="2" id="sub1-form-radio2">省份</a-radio>
                <a-radio value="3" id="sub1-form-radio3">地级市</a-radio>
                <a-radio value="4" id="sub1-form-radio4">县市区</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="选指标" class="!mb-2" id="sub1-form-item2">
              <a-select placeholder="请您先选择地域属性" id="sub1-form-sel1" class="!w-[70%]"></a-select>
              <a-select placeholder="请您选择指标" id="sub1-form-sel2" class="mt-2 !w-[70%]"></a-select>
            </a-form-item>
            <a-form-item label="添加地区" class="!mb-2" id="sub1-form-item3">
              <a-input placeholder="请输入地区" id="sub1-form-input1" class="w-[70%]"></a-input>
              <a-typography-link id="sub1-form-link1" class="ml-2 bg-blue-600 !text-white inline-block py-1 px-2">增加地区</a-typography-link>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 5, span: 18 }" id="sub1-form-item4">
              <a-typography-link id="sub1-form-link2" class="!text-white bg-green-400 py-1 px-2 inline-block">搜索</a-typography-link>
              <a-typography-paragraph id="sub1-form-tip" class="mt-1 text-sm !mb-0">
              说明：至少可添加2个地区，最多可以添加10个地区。
              </a-typography-paragraph>
            </a-form-item>
          </a-form>
          <a-flex class="gap-2 flex-row flex-wrap" id="sub1-left-links">
            <a-typography-link class="text-sm rounded-xl border-solid border-blue-400 !text-blue-400 px-1" href="#" v-for="(item, index) in list" :key="index" :id="`tags-${index}`">{{item}}</a-typography-link>
          </a-flex>
        </a-flex>
        <a-flex class="w-3/5 gap-1" :vertical="true" id="sub1-right">
          <a-flex class="bg-white py-4" justify="center" align="center" id="sub1-right-title">
            <a-typography-title :level="3" class="!m-0" id="sub1-right-title1">全国医生数据库</a-typography-title>
          </a-flex>
          <a-flex class="gap-1" id="sub1-right-content">
            <a-flex :id="`sub1-right-content-${index}`" class="bg-white p-2 flex-1" :vertical="true" v-for="(item, index) in data" :key="index">
              <a-flex align="center" class="justify-between" :id="`sub1-right-content-title-${index}`">
                <a-typography-title :id="`sub1-right-content-att-${index}`" class="!m-0" :level="5">{{item.title}}</a-typography-title>
                <a-typography-text :id="`sub1-right-content-tag-${index}`" class="bg-gray-200 px-2 rounded-xl text-sm !text-gray-600">{{item.tag}}</a-typography-text>
              </a-flex>
              <a-divider class="my-2" :id="`sub1-right-content-divider-${index}`"></a-divider>
              <a-flex :id="`sub1-right-content-flex-${index}-${indexJ}`" v-for="(detail, indexJ) in item.list" :key="indexJ" align="center" class="mb-1">
                <a-typography-paragraph :id="`sub1-right-content-atp1-${index}-${indexJ}`" class="!m-0 w-2 h-2 inline-block bg-red-200 rounded-full"></a-typography-paragraph>
                <a-typography-paragraph class="!m-0 !ml-1 w-[80%] flex" :id="`sub1-right-content-atp2-${index}-${indexJ}`">
                  <a-typography-paragraph :id="`sub1-right-content-atp2-atp1-${index}-${indexJ}`" class="!m-0" :ellipsis="true">{{detail.content}}</a-typography-paragraph>
                  <a-typography-paragraph :id="`sub1-right-content-detail-${index}-${indexJ}`" :ellipsis="true" class="!m-0 flex-1 text-gray-400 !mt-[2px] text-sm !ml-1">{{detail.sub}}</a-typography-paragraph>
                </a-typography-paragraph>
                <a-typography-paragraph :id="`sub1-right-content-time-${index}-${indexJ}`" class="!m-0 text-red-400 text-sm justify-self-end	" v-if="detail.time">{{detail.time}}</a-typography-paragraph>
              </a-flex>
            </a-flex>
            <a-flex :vertical="true" class="bg-white flex-1 p-2" id="sub1-right-content-right">
              <a-typography-title class="!m-0" :level="5" id="sub1-right-gxtj">高校推荐</a-typography-title>
              <a-divider class="my-2" id="sub1-right-divider"></a-divider>
              <a-flex :vertical="true" align="center" id="sub1-right-box" justify="center">
                <a-typography-link class="text-center" id="sub1-right-xx-link1">
                  <a-image :src="usImg1" :preview="false" id="sub1-right-xx-img1"></a-image>
                  <a-typography-text class="block my-2 font-bold" id="sub1-right-xx-text">西北工业大学</a-typography-text>
                </a-typography-link>
                <a-typography-link class="text-center" id="sub1-right-xx-link2">
                  <a-image :src="usImg2" :preview="false" id="sub1-right-xx-img1"></a-image>
                  <a-typography-text class="block my-2 font-bold" id="sub1-right-xx-text">北京化工大学</a-typography-text>
                </a-typography-link>
              </a-flex>
            </a-flex>
          </a-flex>
        </a-flex>
      </a-flex>
    </div>
  </div>
</template>

<script setup>
const list = ['中国 vs 美国', '广东 vs 江苏', '山东 vs 浙江', '河南 vs 四川', '湖北 vs 福建', '北京 vs上海', '深圳 vs 广州 vs 重庆', '苏州 vs 成都 vs 武汉 vs杭州', '宁波vs 青岛', '郑州 vs 福州 vs 济南', '昆山 vS 江阴', '慈溪 vs 宜兴 vs 神木'];

const data = [{title: '热门数据', tag: 'HOT', list: [
    {content: '农林水支出数据', sub:'（含地级市2017-2019）'},
    {content: '全国七次人口普查数据库', sub: '含省市区县数'},
    {content: '全国百强县排名', sub: '按所属地区排名含市辖区'},
    {content: '全国自然保护区数据', sub: '全国2800+个景区'},
    {content: '2024中国大学百强榜', sub: '鸥维数据首次发布'},
    {content: '中国县城全年热度监测榜', sub:'（鸥维数据发'},
    {content: '全国历年高校按专业录取分数线', sub: ''},
    {content: '电动车/新能源汽车销量排行榜', sub: '（按月'},
    {content: '中国城市数字经济指数数据', sub: '（2000'},
    {content: '中国两院院士数据库', sub: '1955-2023'},
  ]},
  {title: '最新数据', tag: 'NEW', list: [
    {content: '国家重点实验室数据', sub:'（仅收录大学', time: '1.12'},
    {content: '社科基金项目数据', sub:'（近10万条）', time: '1.11'},
    {content: '高校CNS论文数据', sub:'(Cell, Nature', time: '1.9'},
    {content: 'Nature论文数据', sub:'（2023不含港澳', time: '1.8'},
    {content: 'ESI论文数据', sub:'（2024.1-2024.11）', time: '1.7'},
    {content: '中国高校经费预算数据', sub:'（2019', time: '1.5'},
    {content: '成果获奖数据', sub:'（包含多个奖项数据）', time: '1.4'},
    {content: '高校一流学科数据', sub:'（收录双一流学', time: '1.2'},
    {content: '中国城市营商环境数据', sub:'（北京大', time: '12.29'},
    {content: '城市医疗数据', sub:'（2020-2023地级', time: '12.25'},
  ]}
];
const usImg1 = 'https://picsum.photos/id/4/80/80';
const usImg2 = 'https://picsum.photos/id/5/80/80';

</script>
<style></style>
